<template>
    <div>
        <a-modal :visible="visible" :width="600" :title="title" okText="确认" cancelText="取消" @cancel="handleCancel" @ok="handleOk">
            <a-form ref="ruleFormRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="父级名称" v-if="form.source">
                    <a-input :maxlength="50" disabled v-model:value="form.source" />
                </a-form-item>
                <a-form-item label="名称" name="dimensionName">
                    <a-input :maxlength="50" v-model:value="form.dimensionName" />
                </a-form-item>
                <a-form-item label="code" name="code" :rules="ruleObj.code" v-if="showCode">
                    <a-input :maxlength="50" v-model:value="form.code" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, computed, nextTick } from 'vue';
export default defineComponent({
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            visible: false,
            form: {
                id: null,
                source: null,
                level: 1,
                dimensionName: '',
                code: '',
                fatherId: null
            },
            title: '新增数据字典',
            showCode: false
        });
        const labelCol = { span: 4 };
        const wrapperCol = { span: 14 };
        const rules = {
            dimensionName: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
        };
        const ruleObj = computed(() => {
            const ruleObj = {
                code: state.showCode ? [{ required: true, message: 'code不能为空', trigger: 'blur' }] : []
            };
            return ruleObj;
        });
        const open = (action) => {
            // 编辑
            if (action.type === 'edit') {
                const { id, level, dimensionName, code, fatherName } = action.data;
                state.form = {
                    ...state.form,
                    dimensionName,
                    id,
                    level,
                    code
                };
                state.title = '编辑数据字典';
                state.showCode = fatherName === '域名地址' || fatherName.indexOf('http') >= 0;
            } else {
                // 添加根节点
                if (action.type === 'createRoot') {
                    state.form = {
                        ...state.form,
                        level: 1
                    };
                } else {
                    const { id, level, dimensionName, fatherName } = action.data;
                    state.form = {
                        ...state.form,
                        fatherId: id,
                        source: dimensionName,
                        level: level + 1
                    };
                    state.showCode = fatherName === '系统' || fatherName === '域名地址';
                }
                state.title = '新增数据字典';
            }
            state.visible = true;
            nextTick(() => {
                unref(ruleFormRef).clearValidate();
            });
        };
        const handleCancel = () => {
            state.visible = false;
            resetForm();
        };
        const handleOk = async () => {
            unref(ruleFormRef)
                .validate()
                .then(async () => {
                    const query = {
                        ...state.form
                    };
                    const { success, errorMsg } = await api.dicModel.save(query);
                    if (success) {
                        message.success(query.id ? '修改成功' : '新增成功');
                        emit('success');
                        state.visible = false;
                        resetForm();
                    } else {
                        message.error(errorMsg);
                    }
                });
        };
        const resetForm = () => {
            state.form = {
                id: null,
                source: null,
                level: 1,
                dimensionName: '',
                fatherId: null
            };
        };
        return {
            labelCol,
            wrapperCol,
            rules,
            ruleObj,
            ruleFormRef,
            ...toRefs(state),
            open,
            handleCancel,
            handleOk
        };
    }
});
</script>